/**
 * Created by hejg on 2018/5/25.
 */
import {observable, computed, action} from 'mobx';
import Style from '../../../components/Style';

export default class PortionPartStore {
    @observable
    selectOrganize = 0;//默认选中机构的第1个下标
    @observable
    organizeOptions = [];//可供选中的机构列表
    @observable
    selectPeriod = 0;//默认选中账期的第1个下标
    @observable
    periodOptions = [];//可供选择的账期列表
    @observable
    selectIndex = 0;//默认选中指标的第1个下标
    @observable
    indexOptions = [];//可供选择的指标列表
    @observable
    screenData = {};//当前页面的核心数据
    @observable
    pieOption = {};//指标饼图数据
    @observable
    lineOption = {};//指标趋势图数据
    @observable
    indicatorVisible = true;//是否启用加载框
    @observable
    indicatorMessage = '';//显示在加载框的文字信息
    @observable
    params = {indexCode: '', opTime: '', orgId: 0};//页面的查询条件

    @computed
    get selectIndexTitle() {
        if (this.indexOptions.length > 0) {
            return this.indexOptions[this.selectIndex].label;
        } else {
            return '正在加载指标';
        }
    }

    @action
    setSelectOrganize(index) {//设置选中机构的下标
        this.selectOrganize = index;
    }

    @action
    setSelectPeriod(index) {//设置选中账期的下标
        this.selectPeriod = index;
    }

    @action
    setSelectIndex(index) {//设置选中指标的下标
        this.selectIndex = index;
    }

    @action
    setOrganizeOptions = (items) => {
        let organizes = new Array();
        for (let i = 0; i < items.length; i++) {
            organizes.push({label: items[i].ORG_NAME, value: items[i].ORG_CODE});
        }
        this.organizeOptions = organizes;
    }

    @action
    setPeriodOptions = (items) => {//设置账期列表数据集
        let periods = new Array();
        for (let i = 0; i < items.length; i++) {
            periods.push({label: items[i], value: items[i]});
        }
        this.periodOptions = periods;
    }

    @action
    setIndexOptions = (items) => {//设置指标列表数据集
        let indexs = new Array();
        for (let i = 0; i < items.length; i++) {
            indexs.push({label: items[i].INDEX_NAME, value: items[i].INDEX_CODE});
        }
        this.indexOptions = indexs;
    }

    @action
    setScreenData = (data) => {//设置屏幕核心数据及饼图数据
        this.screenData = data;
        this.pieOption = {
            series: [
                {
                    name: '累计市场',
                    type: 'pie',
                    center: ['16%', '50%'],
                    radius: ['60%', '75%'],
                    legendHoverLink: false,
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    slient: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'center',
                            formatter: '累计\n市场',
                            color: Style.color.black
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: data.totalShareCmcc, name: '移动'},
                        {value: data.totalShareCu, name: '联通'},
                        {value: data.totalShareCt, name: '电信'},
                        // {value: 0, name: '其他'}
                    ]
                },
                {
                    name: '同比增量',
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['60%', '75%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    slient: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'center',
                            formatter: '同比\n增量',
                            color: Style.color.black
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: data.compareGrowthCmcc, name: '移动'},
                        {value: data.compareGrowthCu, name: '联通'},
                        {value: data.compareGrowthCt, name: '电信'},
                        // {value: 0, name: '其他'}
                    ]
                },
                {
                    name: '当月增量',
                    type: 'pie',
                    center: ['84%', '50%'],
                    radius: ['60%', '75%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    slient: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'center',
                            formatter: '当月\n增量',
                            color: Style.color.black
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: data.incrementCmcc, name: '移动'},
                        {value: data.incrementCu, name: '联通'},
                        {value: data.incrementCt, name: '电信'},
                        // {value: 0, name: '其他'}
                    ]
                }
            ],
            color: [Style.color.blue, Style.color.green, Style.color.red, Style.color.black]
        };
    }

    @action
    setLineOption = (items) => {//设置屏幕趋势图数据
        let xAxisData = [], seriesData = [];
        for (let i = 0; i < items.length; i++) {
            xAxisData.push(items[i].OP_TIME);
            seriesData.push(items[i].MONTHLY_INCOME);
        }
        this.lineOption = {
            grid: {top: 20, bottom: 20, right: 20,left:'15%'},
            tooltip: {
                show: true,
                trigger: 'axis',
                formatter: '{c}',
                backgroundColor: 'rgba(0,0,0,0)',
                textStyle: {color: Style.color.red},
                position: function (point, params, dom, rect, size) {
                    return [point[0], 5];
                },
                axisPointer: {type: 'line', lineStyle: {color: Style.color.lightGray}}
            },
            xAxis: {
                type: 'category',
                axisLabel: {textStyle: {color: Style.color.gray}},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false},
                data: xAxisData
            },
            yAxis: {
                type: 'value',
                axisLabel: {textStyle: {color: Style.color.gray}},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            },
            series: [{
                type: 'line',
                smooth: true,
                data: seriesData
            }],
            color: [Style.color.red]
        };
    }

    @action
    showIndicator = (message) => {//启用加载效果
        this.indicatorVisible = true;
        if (message) {
            this.indicatorMessage = message;
        }
    }

    @action
    hiddenIndicator() {//关闭加载效果
        this.indicatorVisible = false;
    }

    @action
    setParams = (params) => {//设置查询条件
        this.params = params;
    }
}